<template>
<!-- 养殖操作 -->
    <div class="page-content">
        <TableBar 
            :columns="columns" 
            @changeColumn="changeColumn" 
            :layout="layout"
            :showTop="showTop">
            <div slot="bottom">
        <el-button plain size="mini" type="primary" @click="tableAdd_visible=true " v-auth="'breed_job_insert'">新增</el-button>
        <el-button plain size="mini" type="danger" @click="delDataBySelectBox" v-auth="'breed_job_delete'">删除</el-button>
      </div>
      <div slot="top">
        <el-form>
          <el-row :gutter="8">
            <!-- <el-col :span="12"><el-form-item></el-form-item></el-col> -->
            <el-col :span="6">
              <el-form-item>
                <el-input placeholder="请输入操作名称" v-model="gridContent" clearable @change="clearInput"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="searchByKeywords" v-auth="'breed_job_select'">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
        </TableBar>
        
        <!-- 表格数据 -->
    <TheTable :data="data" :page="page" @changeSize="changeSize" @changePage="changePage" :showPage="showPage" :Bottom="35"
      @getDataBySelectBox="getDataBySelectBox">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <!-- 养殖操作Id -->
      <el-table-column :label="columns[0].name" v-if="columns[0].show" :prop="columns[0].prop" width="180"></el-table-column>
      <!-- 操作类型 -->
      <el-table-column :label="columns[1].name" v-if="columns[1].show" :prop="columns[1].prop" width="180" >
        
      </el-table-column>
      <!-- 操作名称 -->
      <el-table-column :label="columns[2].name" v-if="columns[2].show" :prop="columns[2].prop" width="120">
        <template slot-scope="scope">
          <el-tag size="mini" effect="plain" type="success" v-if="scope.row.type == '养殖'">养殖</el-tag>
          <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.type == '喂养'">喂养</el-tag>
          <el-tag size="mini" effect="plain" type="" v-if="scope.row.type == '上市'">上市</el-tag>
        </template>
      </el-table-column>
      <!-- 企业Id -->
      <!-- <el-table-column :label="columns[3].name" v-if="columns[3].show" :prop="columns[3].prop" width="150"></el-table-column> -->
        <!-- 基地Id
        <el-table-column :label="columns[4].name" v-if="columns[4].show" :prop="columns[4].prop" width="120">
      </el-table-column> -->
      <!--  使用状态 -->
      <!-- <el-table-column :label="columns[3].name" v-if="columns[3].show" :prop="columns[3].prop" width="150"></el-table-column>  -->
      <!-- 操作 -->
      <el-table-column :label="columns[3].name" v-if="columns[3].show" width=auto min-width="180" fixed="right">
        <template slot-scope="scope">
            <el-button size="mini" type="success" plain @click="tableOpen(scope.row.id)" v-if="scope.row.useStatus === '0'" v-auth="'breed_job_update'">启用</el-button>
            <el-button size="mini" type="warning" plain @click="tableClose(scope.row.id)" v-if="scope.row.useStatus === '1'" v-auth="'breed_job_update'">禁用</el-button>
            <el-button size="mini" type="primary" plain @click="tableEdit(scope.row)" v-auth="'breed_job_update'">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="tableDelet(scope.row.id)" v-auth="'breed_job_delete'">删除</el-button>
        </template>
      </el-table-column>
    </TheTable>
        <BeedingOperationEditForm v-show="tableEdit_visible" :editform="editform" :tableEdit_visible="tableEdit_visible"
       @closeEditDialog="closeEditDialog" @finish="finish"></BeedingOperationEditForm>
    <BeedingOperationAddForm v-show="tableAdd_visible" :tableAdd_visible="tableAdd_visible"
       @closeAddDialog="closeAddDialog"  @finish="finish"></BeedingOperationAddForm>
    </div>
</template>

<script>
import {
  getAllInfoByPage,
//   searchOperateKeyword,
//   newFarmingOperate,
//   editFarmingOperate,
  delFarmingOperate,
  delOneFarmingOperate,
  closeFarmingOperate,
  openFarmingOperate,
  searchOperateKeyword

} from "@/Api/productionmanage/BreedingOperation";
  // 编辑养殖操作
  import BeedingOperationEditForm from '@/components/ProductionManagement/BeedingOperation/BeedingOperationEditForm'
  // 新增养殖操作
  import BeedingOperationAddForm from '@/components/ProductionManagement/BeedingOperation/BeedingOperationAddForm'
export default {
  name: "BreedingOperation",
  components: {
    BeedingOperationAddForm,
    BeedingOperationEditForm
    },
  data() {
    return {
      data: [],
      columns: [
        // 表头数据
        { name: "养殖操作Id", show: true, prop: "id" },
        // type (string, optional): 操作类型（1、养殖，2、喂养，3、上市） ,
        // useStatus (string, optional): 是否使用(1、使用，0、禁用)
        { name: "操作名称", show: true, prop: "name" },
        { name: "操作类型", show: true, prop: "type" },
        // { name: "使用状态", show: true, prop: "useStatus" },
        // { name: "企业Id", show: true, prop: "enterpriseId" },
        { name: "操作", show: true, }
      ],
      showPage: true,
      layout: "search, refresh, column",
      // 传递给TheTable的数据
        page: {
          total: 0,
          pageSize: 10,
          current: 1,
        },
        // 表格选中框
        idBySelectBox: [],
        // 展示搜索框
        showTop: false,
        tableAdd_visible:false,
        tableEdit_visible:false,
        editform: {},
        // 关键词搜索
        gridContent:"",
        // 选中多选框的信息列表
        selectedBoxList:[],
        }
    },
    created() {
      this.getAllList();
      // this.getBaseInfo()
    },
    methods: {
      // 查询所有数据
      async getAllList() {
        // console.log(this.searchData);
        const {
          data: res
        } = await getAllInfoByPage(
          this.page.current,
          this.page.pageSize,
        );
        // console.log(res)
        if (res.statusCode == 20000) {
          if (res.data === null) {
            return this.$message.warning("搜索范围内无数据");
          }
          this.data = res.data.records;       
          this.page.total = parseInt(res.data.total);
          console.log(this.data)
        } else {
          this.$message.error("查询养殖作业数据失败");
        }

      },
    //   表格内删除单个
       async tableDelet(a) {
        console.log(a);
        const {
          data: res
        } = await delOneFarmingOperate(a);
        if (res.statusCode == 20000) {
          this.$message('已成功删除该养殖作业');
          this.getAllList();
        } else {
          this.$message.error("删除该养殖作业失败");
        }
      },
      //   启用养殖操作
       async tableOpen(a) {
        const {
          data: res
        } = await openFarmingOperate(a);
        if (res.statusCode == 20000) {
          this.$message('已成功启用该养殖作业');
          this.getAllList();
        } else {
          this.$message.error("启用该养殖作业失败");
        }
      },
      //   禁用养殖操作
       async tableClose(a) {
        const {
          data: res
        } = await closeFarmingOperate(a);
        if (res.statusCode == 20000) {
          this.$message('已成功禁用该养殖作业');
          this.getAllList();
        } else {
          this.$message.error("禁用该养殖作业失败");
        }
      },
      // 通过表格选择box批量删除养殖作业
      async delDataBySelectBox() {
        console.log(this.idBySelectBox);
        const {
          data: res
        } = await delFarmingOperate(this.idBySelectBox);
        if (res.statusCode == 20000) {
          console.log(res);
          this.$message('已成功删除选中的养殖作业');
          this.getAllList();
        } else {
          console.log(res.message)
          this.$message.error("删除该养殖作业失败");
        }
      },
      
      // 通过操作名称关键词搜索
      async searchByKeywords() {
        console.log(this.gridContent);
        // this.page.current=1;
        const {
          data: res
        } = await searchOperateKeyword(
          this.page.current,
          this.page.pageSize,
          this.gridContent);
        if (res.statusCode == 20000) {
          console.log(res);
          this.data = res.data.records;
          this.page.total = parseInt(res.data.total);
          this.$message.success("查询养殖操作数据成功");
        } else {
          return this.$message.error("查询养殖操作数据失败");
        }
      },
      // 清空搜索输入框
      clearInput(){
        if(this.gridContent===""){
          this.getAllList();
        }
      },
      getDataBySelectBox(w) {
        console.log(w)
        this.selectedBoxList=w;
        if (w.length == 0) {
          this.getAllList();
        } else {
          var arr = [];
          for (var i = 0; i < w.length; i++) {
            // var a=parseInt(w[i].id);
            // console.log(typeof a)
            arr.push(w[i].id);
          }
          // console.log(arr);
          this.idBySelectBox = arr;
          console.log(this.idBySelectBox);         
        }
      },
      // 新增编辑完成后获取最新数据
      finish(){
        this.getAllList()
      },
      // 点击表格编辑按钮,传值到表单
      tableEdit(a) {
        console.log(a);
        // a.operateTime = this.formatDateToDialog(a.operateTime);
        // console.log(typeof a.farmingTime)
        this.editform = a;
        this.tableEdit_visible = true;
        // console.log(this.editform);
      },

      // 表格编辑表单弹窗隐藏
      closeEditDialog(a) {
        // console.log(a);
        // console.log(this.tableEdit_visible);
        this.tableEdit_visible = a;
      },
      closeAddDialog(a) {
        // console.log(a);
        // console.log(this.tableEdit_visible);
        this.tableAdd_visible = a;
      },
      // 选择显示隐藏列
      changeColumn(newcolumns) {
        this.columns = newcolumns
      },
      // 分页 改变页码
      changePage(a) {
        this.page.current = a.current
        console.log(this.keyWord)
        if(this.keyWord!="" && this.keyWord!=undefined){
          this.searchByKeyword();
        }else{
          this.getAllList();
        }
      },
      // 分页 改变每页显示的条数
      changeSize(a) {
        this.page.pageSize = a.pageSize
        if(this.keyWord!="" && this.keyWord!=undefined){
          this.searchByKeyword();
        }else{
          this.getAllList();
        }
      },
    }
}
</script>

<style lang="sass">
</style>